<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输角色名称" clearable v-model="name" @clear="searchRole">
                        <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="showDialog">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table :data="roleList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="name"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeRoleById(scope.row.id)">删除</el-button>
                        <el-button type="danger" size="mini" @click="showRolePermissionDialog(scope.row)">角色权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加角色-->
        <el-dialog title="角色管理" :visible.sync="dialogVisible" width="50%">
            <el-form
                    :model="roleForm"
                    ref="roleForm"
                    label-width="100px"
                    class="demo-ruleForm">


                <el-form-item label="角色名称">
                    <el-input v-model="roleForm.name"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog title="角色授权" :visible.sync="authorizationDialogVisible" width="50%">
            <el-form :model="authorizationForm" :label-width="formLableWidth" class="demo-ruleForm">
                <el-form-item label="角色名称">
                    <el-input v-model="authorizationForm.name" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="权限数据">
                    <el-tree :data="permissionData"
                             show-checkbox node-key="id"
                             ref="tree"
                             :default-expand-all="true"
                             :default-checked-keys="defaultPermissionCheck"
                             :props="defaultProps">
                    </el-tree>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="roleAuthorization()">确 定</el-button>
                <el-button @click="authorizationDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>


    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                name: "",
                roleList: [],
                total: 0,
                roleForm: {},
                dialogVisible: false,
                authorizationDialogVisible: false,
                defaultPermissionCheck: [],
                authorizationForm: {},
                formLableWidth: "120px",
                permissionData: [],
                defaultProps: {
                    children: 'children',
                    label: 'permissionName'
                }
            };
        },
        methods: {
            roleAuthorization() {
              //获取选中的id
              let permissionIds = this.$refs.tree.getCheckedKeys();
              //获取角色id
                let roleId = this.authorizationForm.id;
                //封装请求数据
                let requestData = {
                    permissionIds: permissionIds,
                    roleId: roleId
                }
                this.$axios.post(`/rolePermission/roleAuthorization`,requestData).then(resp => {
                    if (resp.data.code == 200) {
                        this.$message.success("角色权限分配成功");
                        this.authorizationDialogVisible = false;
                    }else {
                        this.$message.error(resp.data.message);
                    }
                })
            },
          async  showRolePermissionDialog(row) {
                let temp = {};
                Object.assign(temp,row);
                this.authorizationForm = temp;
                this.authorizationDialogVisible = true;
              // 查询所有的权限
                await this.loadPermissionData();
                //查询某一个角色的，已经拥有的权限
                await this.loadPermissionIdsByRoleId(row.id);
            },
           async loadPermissionData() {
              await new Promise((resolve,reject)=> {
                  this.$axios.get('/permissionHs/list').then(resp => {
                      if (resp.data.code ==200) {
                          this.permissionData = resp.data.data;
                      }else {
                          this.$message.error(resp.data.message)
                      }
                      resolve(true);//表示异步请求执行完成
                  })
              })
            },
            async loadPermissionIdsByRoleId(roleId) {
                await new Promise((resolve,reject)=> {
                    let url = `/rolePermission/findPermissionIdsByRoleId/${roleId}`;
                    this.$axios.get(url).then(resp => {
                        if (resp.data.code == 200) {
                            this.defaultPermissionCheck = resp.data.data;
                        }else {
                            this.$message.error(resp.data.message)
                        }
                        resolve(true);//表示异步请求执行完成
                    })
                })
            },
            // 删除角色信息
            removeRoleById(id) {

            },
            showDialog(){

            },
            //添加角色
            showAddDialog(row) {
                this.addDialogVisible = true;
            },
            //编辑角色
            showEditDialog(row) {
                this.editDialogVisible = true;
                this.editRoleForm.id = row.id;
                this.editRoleForm.name = row.name;
            },
            saveOrUpdate() {

            },
            editRoleFormClose() {
                this.$refs.editRoleFormRef.resetFields();
            },


            editRole() {

            },
            addRole() {

            },

            getRoleList() {
               this.$axios.get("/role/findAll",{
                   params:{
                       pageSize: this.pageSize,
                       pageNum : this.pageNum,
                       name: this.name
                }
               }).then(resp => {
                   console.log("",resp)
                   this.total = resp.data.data.total;
                   this.roleList = resp.data.data.records;
               })
            },
            searchRole() {
                this.getRoleList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getRoleList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getRoleList();
            },


        },
        created() {
            this.searchRole();
        }
    };
</script>
<style lang="less" scoped>
</style>